<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登陆页面</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <script src="js/jquery.min.js"></script>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">主页</a>
        <a href="reg.html">注册</a>
    </div>
    <!-- 版心 -->
    <div class="login-container">
        <!-- 中间的登陆框 -->
        <div class="login-dialog">
            <h3>登陆</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id="username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id="password">
            </div>
            <div class="row" style="margin-bottom: 20px;">
                <span>验证码</span>
                <input id="code_input" style="width: 66px;">&nbsp;&nbsp;
                <img onclick="refreshCode()" id="codeimg" src="img/check_code.png"
                    style="height: 50px;width: 128px;">
            </div>
            <div class="row">
                <button id="submit" onclick="doLogin()">提交</button>
            </div>
        </div>
    </div>

    <script>
        // 验证码key
        var codeKey = "";

        // 获取并显示验证码
        function refreshCode() {
            jQuery.ajax({
                url:'/getcaptcha',
                type:'GET',
                data:{},
                success:function (body) {
                    if(body.code==200&&body.data!=null&&body.data!=""){
                        // 获取验证码成功
                        codeKey=body.data.codeKey;
                        jQuery('#codeimg').attr('src',body.data.codeUrl);
                    }
                }
            })
        }

        refreshCode();
        function doLogin() {
            // 非空参数的校验
            var username=jQuery('#username')
            var password=jQuery('#password')
            var checkCode=jQuery('#code_input')

            if(username.val().trim()==''){
                alert('请输入用户名！')
                username.focus()
                return false
            }
            if(password.val().trim()==''){
                alert('请输入密码！')
                password.focus()
                return false
            }
            if(checkCode.val().trim()==''){
                alert('请输入验证码！')
                checkCode.focus()
                return false
            }

            // 2. 发送请求给客户端
            jQuery.ajax({
                url:"/user/login",
                type:"post",
                data:{
                    codeKey:codeKey,
                    // 前面的 username 可以加引号, 也可以不加
                    username:username.val(),
                    password:password.val(),
                    checkCode:checkCode.val()
                },
                success:function(body) {
                    if(body.code == 200 && body.data == 1) {
                        // alert("登录成功!");
                        location.href = "myblog_list.html";
                    } else {
                        alert("用户名或密码错误, 请重新输入!");
                        username.focus();
                    }
                }
            });
        }
    </script>
</body>

</html>